<template>
    <div>
      <el-table :data="specslist" border style="width: 100%">
        <el-table-column prop="id" label="规格编号" width="100px">
        </el-table-column>
        <el-table-column prop="specsname" label="规格名称"> </el-table-column>
        <el-table-column label="规格属性">
          <template slot-scope="item">
            <div>
              <p v-for="attr in item.row.attrs" :key="attr">{{attr}}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100px">
          <template slot-scope="item">
            <div>
              <el-tag v-if="item.row.status == 1" type="success">启用</el-tag>
              <el-tag v-else type="danger">禁用</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="item">
            <div>
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="edit(item.row.id)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                @click="del(item.row.id)"
                size="mini"
                icon="el-icon-delete"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="getSize"
        background
        layout="prev, pager, next"
        :total="count"
        @current-change="changePage"
      >
      </el-pagination>
    </div>
  </template>
  
  <script>
  //引入辅助性函数
  import { mapGetters, mapActions } from "vuex";
  import { specsdelete } from "../../request/api";
  export default {
    data() {
      return {};
    },
    mounted() {
      //页面一加载就调用列表接口以及总条数
      this.getSpecs();
      this.getCount();
    },
    computed: {
      ...mapGetters({
        specslist: "specs/getSpecsList",
        getSize: "specs/getSize",
        count: "specs/getCount",
      }),
    },
    methods: {
      ...mapActions({
        getSpecs: "specs/getSpecsListAction",
        getCount: "specs/getCountAction",
        changePageInfo: "specs/changePageAction",
      }),
      //封装一个切换页码事件
      changePage(n) {
        this.changePageInfo(n);
      },
      //封装一个删除事件
      del(id) {
        this.$confirm("你确定要删除这条数据吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            specsdelete({ id }).then((res) => {
              if (res.code == 200) {
                this.$message.success(res.msg);
                //页面一加载就调用列表接口以及总条数
                this.getSpecs();
                this.getCount();
              }else{
                this.$message.error(res.msg);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      //封装一个点击编辑按钮事件
      edit(id) {
        this.$emit("edit", id);
      },
    },
  };
  </script>
  
  <style scoped></style>
  